class Dialog {
    constructor(options) {
        let newOptions = Object.assign({
            width: "40%",
            height: "250px",
            title: "默认标题",
            content: "默认内容",
            dragable: true, //是否可拖拽
            maskable: true, //是否有遮罩
            isCancel: true //是否有取消
        }, options);
        this.opts = newOptions;
        this.init();
    }
    // 显示隐藏
    open() {
        this.opts.maskable && (this.dialogEle.querySelector(".wrapper").style.display = "block");
        this.dialogEle.querySelector(".dialog").style.display = "block";
    }
    close() {
        this.opts.maskable && (this.dialogEle.querySelector(".wrapper").style.display = "none");
        this.dialogEle.querySelector(".dialog").style.display = "none";
    }
    // 按钮
    init() {
        this.renderDialog();
        this.opts.dragable && this.drag();
        this.dialogEle.addEventListener("click", e => {
            switch (e.target.className) {
                case "close":
                    this.opts.cancel();
                    this.close();
                    break;
                case "default":
                    this.opts.cancel();
                    this.close();
                    break;
                case "primary":
                    this.opts.confirm();
                    this.close();
                    break;
            }
        });
    }
    // 弹框
    renderDialog() {
        let dialogEle = document.createElement("div");
        dialogEle.innerHTML = `
            <div class="wrapper"></div>
            <div class="dialog" style="width:${this.opts.width};height:${this.opts.height}">
                <div class="header">
                    <span class="title">${this.opts.title}</span><span class="close">X</span>
                </div>
                <div class="body">
                    <span>${this.opts.content}</span>
                    <input class="input-inner" type="text" />
                </div>
                <div class="footer">
                ${this.opts.isCancel ? '<span class="default">取消</span>' : ''}
                    <span class="primary">确定</span>
                </div>
            </div>
        `;
        document.querySelector("body").appendChild(dialogEle);
        this.dialogEle = dialogEle;
    }
    // 拖拽
    drag() {
        let dialog = this.dialogEle.querySelector(".dialog");
        dialog.addEventListener("mousedown", function (ev) {
            let e = ev || window.event;
            let l = e.clientX - dialog.offsetLeft;
            let t = e.clientY - dialog.offsetTop;

            function move(e) {
                let ev = e || window.event;
                dialog.style.left = ev.clientX - l + "px";
                dialog.style.top = ev.clientY - t + "px";
            }
            document.addEventListener("mousemove", move);
            document.addEventListener("mouseup", function () {
                document.removeEventListener("mousemove", move);
            });
            e.preventDefault();
        });
    }
}
